<template>
	<view class="searchPage">
		<!-- 	<uni-nav-bar  backgroundColor="#FFFFFF" :border="false" :fixed="true" leftWidth="0"
			rightWidth="0" class="searchPage-top">
			<view class="searchPage-top-box">
				<view class="searchPage-top-back" @tap="navback">
					<image src="https://mcdn.chatgk.com/xcx/static/images/homeSearch/searchbackicon.png" mode=""></image>
				</view>
				<view class="searchPage-top-center">
					<image src="https://mcdn.chatgk.com/xcx/static/images/homeSearch/search-14.png" mode=""></image>
					<input required="required" class="name-input" type="text" confirm-type="search"
						@confirm="getInputSearch(olddata)" :placeholder="placeholderData" v-model="olddata"
						focus="true">
					<view v-show="inputData.length>0" class="clear-input" @tap="selectInput">
						<image src="https://mcdn.chatgk.com/xcx/static/images/homeSearch/qingchu.png"
							class="clear-input-img"></image>
					</view>
				</view>
				<view class="searchPage-top-search" @tap="getInputSearch(olddata)">
					搜索
				</view>
			</view>
		</uni-nav-bar> -->


		<!-- 自定义导航 -->
		<uni-nav-bar style="padding-top: 15rpx;" id="navbar" :fixed="true" :statusBar="true" :border="false"
			left-width="65rpx" right-width="65rpx">
			<template v-slot:left>
				<view style="height: 100%;width: 60rpx;margin-top: 10rpx;" @tap="navback">
					<image style="width: 100%;height: 60rpx;"
						src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back.png"></image>
				</view>
			</template>

			<template v-slot:default>
				<view class="h-s-t-s" style="margin-top: 10rpx;">
					<image style="width: 28rpx; height: 28rpx; margin-left: 20rpx; margin-right: 10rpx;"
						src="https://mcdn.chatgk.com/xcx/static/images/home/home-search-img.png" mode=""></image>
					<input :placeholder="placeholderData" placeholder-class="input-placeholder"
						@confirm="getInputSearch" class="nav-bar-input" type="text" id="" v-model="olddata"
						confirm-type="search">
				</view>
			</template>
			<view class="searchPage-top-search" @click="getInputSearch">
				搜索
			</view>
		</uni-nav-bar>

		<scroll-view v-if="tabpage==1" scroll-y="true" class="contents" :enhanced="true" :bounces="false"
			:show-scrollbar="false" :refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrestore="onRestore" :refresher-threshold="100" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh">
			<view class="searchPage-specify" v-show="specifyDataState==1">
				<view class="searchPage-specify-title">
					搜索指定内容
				</view>
				<view class="searchPage-specify-ul">
					<view class="searchPage-specify-li" v-for="(item,index) in specifyData" :key="index"
						@tap="getSearchTypeData(item.name,item.searchType)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="searchPage-history" v-show="historyDataState==1">
				<view class="searchPage-history-title">
					<text class="searchPage-history-title-txt">历史搜索</text>
					<image src="https://mcdn.chatgk.com/xcx/static/images/homeSearch/delete.png" mode=""
						@tap="removeStorage"></image>
				</view>
				<view class="searchPage-history-ul">
					<view class="searchPage-history-li" v-for="(item,index) in historyData" :key="index"
						@tap="clickhistory(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="searchPage-hot">
				<view class="searchPage-hot-title">
					热门搜索
				</view>
				<view class="searchPage-hot-ul">
					<view class="searchPage-hot-li" v-for="(item,index) in hotData" :key="index"
						@tap="clickhot(item.cnName,item)">
						<!-- <image src="https://mcdn.chatgk.com/xcx/static/images/homeSearch/huobao-2.png" mode="">
						</image> -->
						<text>{{item.cnName}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-else class="searchPage-else-box">
			<searchMassage :inputValue="inputData" :hotType="hotType"></searchMassage>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request/api.js'
	import searchMassage from "./search-page/searchMassage.vue"
	export default {
		components: {
			searchMassage
		},
		data() {
			return {
				olddata: '', //用来转接
				tabpage: 1, //头部下方的切换 和  头部中的信息的显示
				placeholderData: '院校/职业/专业/资讯', //动态显示搜索框提示文字
				inputData: '', //搜索框数据
				specifyData: '',
				specifyDataState: 1, //1是状态 表渲染指定内容  根据状态判断是否渲染
				historyData: '',
				historyDataState: 1, //1是状态 表渲染历史内容  根据状态判断是否渲染
				hotData: '',
				hotType: '',
				triggered: false,
				timeout: 0,
			}
		},
		onLoad() {

			this.getSearchPageData()
			this.historychange()
			this._freshing = false;
			this.triggered = true;


		},
		methods: {

			// ...mapMutations(["changeInputData"]),
			// 页面一进来渲染
			getSearchPageData() {
				this.historychange()
				const userinfo = getApp().globalData.userinfo
				request.searchpage().then(res => {
					let getNum = res.data.length
					this.specifyData = res.data.slice(0, (getNum - 1))
					this.hotData = res.data[(getNum - 1)].data
				})
			},
			flatDeep(arr) {
				let result = [];
				for (let i = 0; i < arr.length; i++) {
					if (Array.isArray(arr[i])) {
						result = result.concat(this.flatDeep(arr[i]))
					} else {
						result.push(arr[i])
					}
				}
				return result;
			},
			// 获取点击指定内容之后的数据
			getSearchTypeData(data, items) {
				let newdata = {
					searchType: items
				}
				this.hotType = items
				let placedata = JSON.stringify(data)
				let newplacedata = placedata.substring(1, placedata.length - 1)
				this.placeholderData = "请输入" + newplacedata + "名称" //控制input框的提示文字
				request.searchType(newdata).then(res => {
					// this.hotData = res.data.find(item => item.name == newplacedata).data
					this.hotData = res.data[1].data
					let newhotData = []
					switch (data) {
						case "专业":
							this.hotData = this.hotData.map((item) => {
								item.cnName = item.name
								return item
							})
							break;
						case "职业":
							this.hotData = this.hotData.map((item) => {
								item.cnName = item.jobName
								return item
							})
							break;
						case "文章":
							this.hotData = this.hotData.map((item) => {
								item.cnName = item.title
								return item
							})
							break;
					}
					setTimeout(() => {
						this.specifyDataState = 0;
					}, 0)
				})
			},
			//点击热门进行跳转函数
			clickhot(data, itemdata) {
				let newhistoryData = {
					searchdata: uni.getStorageSync("historyData").searchdata || [],
					searchType: uni.getStorageSync("historyData").searchType || []
				}
				if (data) {
					const indexBot = newhistoryData.searchdata.indexOf(data)
					if (indexBot != -1) {
						newhistoryData.searchdata.splice(indexBot, 1)
						newhistoryData.searchdata.unshift(data)
					} else {
						newhistoryData.searchdata.unshift(data)
					}
				}
				uni.setStorageSync("historyData", newhistoryData)
				if (this.hotType == 'school') {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/searchcollege/collegeDetails/college-details?data=' +
							JSON.stringify(itemdata)
					})
				} else {
					this.olddata = data
					this.inputData = data
					this.tabpage = 2
				}
			},
			// input框进行搜索执行的时候
			getInputSearch(data) {

				// #ifdef MP-WEIXIN
				this.inputData = ""
				this.inputData = this.olddata
				let newhistoryData = {
					searchdata: uni.getStorageSync("historyData").searchdata || [],
					searchType: uni.getStorageSync("historyData").searchType || []
				}
				if (this.olddata) {
					const indexBot = newhistoryData.searchdata.indexOf(this.olddata)
					if (indexBot != -1) {
						newhistoryData.searchdata.splice(indexBot, 1)
						newhistoryData.searchdata.unshift(this.olddata)
					} else {
						newhistoryData.searchdata.unshift(this.olddata)
					}
				}
				uni.setStorageSync("historyData", newhistoryData)
				this.tabpage = 2
				this.historychange()
				// #endif

				// #ifdef APP-PLUS || H5
				this.inputData = ""
				this.inputData = data
				let newhistoryData = {
					searchdata: uni.getStorageSync("historyData").searchdata || [],
					searchType: uni.getStorageSync("historyData").searchType || []
				}
				if (data) {
					const indexBot = newhistoryData.searchdata.indexOf(data)
					if (indexBot != -1) {
						newhistoryData.searchdata.splice(indexBot, 1)
						newhistoryData.searchdata.unshift(data)
					} else {
						newhistoryData.searchdata.unshift(data)
					}
				}
				uni.setStorageSync("historyData", newhistoryData)
				this.tabpage = 2
				this.historychange()
				// #endif
			},
			//历史
			clickhistory(data) {
				this.olddata = data
				this.inputData = data
				this.tabpage = 2
			},
			// 返回事件
			navback() {
				this.olddata = ""
				this.inputData = ''
				if (this.tabpage != 1) {
					this.hotType = ""
					this.tabpage = 1
					this.getSearchPageData()
					setTimeout(() => {
						this.specifyDataState = 1
					}, 0)


				} else {
					if (this.specifyDataState == 0) {
						this.getSearchPageData()
						setTimeout(() => {
							this.specifyDataState = 1
						}, 0)
						this.hotType = ""
					} else {
						uni.navigateBack()
					}
				}

				//进行判断是否点击了搜索指定内容 点击了则取消隐藏 否则后退
				if (this.specifyDataState == 0 || this.inputData.length == 0) {

					setTimeout(() => {
						this.specifyDataState = 1
					}, 100)
					this.tabpage = 1
				} else {
					uni.navigateBack({
						success: function() {
							this.tabpage = 1
							beforePage.onLoad(); // 执行上一页的onLoad方法
						}
					})
				}
			},
			// 改变状态历史数据 进来则判断
			historychange() {

				this.historyData = uni.getStorageSync("historyData").searchdata || []
				if (this.historyData.length > 0) {
					this.historyDataState = 1
				} else {
					// this.historyData = ''
					this.historyDataState = 0
				}
			},
			// 清空本地存储
			removeStorage() {
				uni.removeStorageSync("historyData")
				this.historyDataState = 0
			},
			// 下拉刷新函数
			onPulling(e) {
				if (this.timeout !== null) {
					clearTimeout(this.timeout)
				}
				this.timeout = setTimeout(() => {
					this.getSearchPageData()
					this.historychange()
				}, 1000)

			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},

			// 删除input输出框的值
			selectInput() {
				this.olddata = ""
				this.inputData = ""
			}

		}





	}
</script>

<style lang="scss" scoped>
	/* 设置 placeholder 的颜色 */
	::v-deep .input-placeholder {
		color: #CCCCCC !important;
		opacity: 1 !important;
		font-size: 20rpx !important;
	}

	.h-s-t-s {
		height: 60rpx;
		width: 60%;
		display: flex;
		justify-content: left;
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 60rpx;
	}

	.searchPage-top-search {
		width: 80rpx;
		height: 100%;
		font-size: 28rpx;
		font-weight: 400;
		color: #FF3B0A;
		display: flex;
		justify-content: center;
		margin-right: -20rpx;
		margin-top: 20rpx;
	}

	.searchPage {
		height: 100vh;
	}

	.searchPage-top {
		width: 100%;

		.searchPage-top-box {
			width: 100%;
			display: flex;
			align-items: center;

			.searchPage-top-back {
				position: relative;
				left: -20rpx;
				width: 60rpx;
				height: 100%;
				display: flex;
				align-items: center;

				image {
					width: 100%;
					height: 60rpx;
				}
			}

			.searchPage-top-center {
				width: 46%;
				height: 72rpx;
				background-color: #F8F8F8;
				border-radius: 72rpx;
				display: flex;
				align-items: center;
				padding: 0 34rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 18rpx;
				}

				input {
					flex: 1;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.searchPage-top-search {
				width: 80rpx;
				height: 100%;
				font-size: 28rpx;
				font-weight: 400;
				color: #FF3B0A;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: -20rpx;
			}
		}
	}

	.searchPage-specify {
		width: 100%;
		padding-left: 32rpx;
		margin-top: 60rpx;

		.searchPage-specify-title {
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			line-height: 34rpx;
		}

		.searchPage-specify-ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 26rpx;

			.searchPage-specify-li {
				height: 60rpx;
				border-radius: 36rpx;
				background-color: #F8F8F8;
				font-size: 24rpx;
				color: #333333;
				line-height: 60rpx;
				text-align: center;
				flex-shrink: 0;
				padding: 0 42rpx;
				margin: 10rpx 20rpx 10rpx 0;
			}
		}
	}

	.searchPage-history {
		width: 100%;
		padding-left: 32rpx;
		margin-top: 56rpx;

		.searchPage-history-title {
			height: 60rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 100rpx;
			}
		}

		.searchPage-history-ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 26rpx;

			.searchPage-history-li {
				height: 60rpx;
				border-radius: 36rpx;
				background-color: #F8F8F8;
				font-size: 24rpx;
				font-weight: 600;
				color: #999999;
				line-height: 60rpx;
				text-align: center;
				flex-shrink: 0;
				padding: 0 42rpx;
				margin: 10rpx 20rpx 10rpx 0;
			}
		}
	}

	.searchPage-hot {
		width: 100%;
		padding-left: 32rpx;
		margin-top: 56rpx;

		.searchPage-hot-title {
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			line-height: 34rpx;
		}

		.searchPage-hot-ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 26rpx;

			.searchPage-hot-li {
				height: 60rpx;
				border-radius: 36rpx;
				background-color: #F8F8F8;
				flex-shrink: 0;
				padding: 0 38rpx;
				margin: 10rpx 52rpx 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 26rpx;
					height: 28rpx;
					padding-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
				}
			}
		}
	}

	.name-input:valid+.clear-input {
		display: block;
	}

	.clear-input {
		margin-right: -20rpx;
	}

	.contents {
		height: 100%;
	}
</style>